<template>
  <div class="main">
    <div class="group">
      <h3>绑定 HTML class:绑定对象</h3>
      <div class="content">
        <div :class="{ active: isActive, 'text-danger': hasError }" @click="changeClass">
          沁园春·雪
        </div>
      </div>
    </div>
    <div class="group">
      <h3>绑定 HTML class:绑定对象变量 reactive</h3>
      <div class="content">
        <div :class="classObjrea" @click="changeClass2">小王子</div>
      </div>
    </div>
    <div class="group">
      <h3>绑定 HTML class:绑定对象变量 ref</h3>
      <div class="content">
        <div :class="classObjRef" @click="changeClass3">人生若只如初见</div>
      </div>
    </div>
    <div class="group">
      <h3>绑定 HTML class:绑定数组 ref</h3>
      <div class="content">
        <div
          :class="[isActive ? activeClass4 : '', errorClass4, `active-new`]"
          @click="changeClass4"
        >
        梦里花落知多少
        </div>
      </div>
    </div>
    <div class="group">
      <h3>绑定 HTML class: 在组件中使用</h3>
      <div class="content">
        <StuDemoSon4 :class="classObjRef"></StuDemoSon4>
      </div>
    </div>
    <div class="group">
      <h3>绑定 HTML class: 计算属性</h3>
      <div class="content">
        <div :class="classObjComp" @click="changeClass4">不想起床</div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed, reactive, ref } from 'vue'
import StuDemoSon4 from "./components/StuDemoSon4.vue"
import { log } from 'echarts/types/src/util/log.js';

//1、绑定对象
const isActive = ref(true)
const hasError = ref(false)
console.log(isActive.value,'isActive.value');
// 直接写入dom的对象
function changeClass() {
  isActive.value = !isActive.value
  console.log(isActive.value,'isActive.value');
  
  hasError.value = !hasError.value
}

// 2、通过 reactive 包装的 状态对象
const classObjrea = reactive({
  active: true,
  'text-danger': true
})
console.log(classObjrea, 'reactive')
function changeClass2() {
  classObjrea.active = !classObjrea.active
  classObjrea['text-danger']=!classObjrea['text-danger']
}

//3、通过 ref 包装的 状态对象
const classObjRef = ref({
  active: true,
  'text-danger': true
})
console.log(classObjRef, 'ref')
console.log(classObjRef.value, 'ref.value')
function changeClass3() {
  classObjRef.value['text-danger'] = !classObjRef.value['text-danger']
}


// 4、通过 ref 包装的数组 状态对象
const activeClass4 = ref('active')
const errorClass4 = ref('text-danger')
const changeClass4 = () => {
  console.log(activeClass4.value,'activeClass4.value');
  errorClass4.value = 'text-success'
}
console.log(activeClass4.value,'activeClass4.value');
// 计算属性
const classObjComp = computed(() => ({
  active: true,
  'text-danger': true
}))

</script>

<style lang="scss" scoped>
@import '@/assets/groupDemo.scss';
.active {
  color: rgb(13, 173, 147);
}
.text-danger {
  background-color: rgb(223, 178, 64);
}
.text-success {
  background-color: rgb(219, 217, 227);
}
.active-new {
  font-size: 22px;
}
</style>
